<html>

<head>
    <script src="build/pdf.js"></script>
    <script src="pdf-helper.js"></script>
    <link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css">
    <script src="jquery-3.5.1.js"></script>
    <script src="bootstrap-4.5.2-dist/js/bootstrap.bundle.min.js"></script>
    <script src="ws-audio-api/dist/ws-audio-api.min.js"></script>
    <style>
        #the-canvas {
            border: 1px solid black;
            direction: ltr;
        }

        [hidden] {
            display: none !important;
        }

        #infos {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 1;
            /* padding: 10px; */
            /* border-radius: 50%; */
        }

        #collapseExample {
            position: absolute;
            bottom: 50px;
            right: 10px;
            z-index: 1;
        }

        .muted .unmute {
            display: none;
        }

        .unmuted .mute {
            display: none;
        }

    </style>
</head>

<body>

    <div id="infos" class="btn-group mr-2" role="group" aria-label="First group">
        <button id="viewer-mute-toggle" type="button" class="btn btn-secondary unmuted">
            <svg class="unmute" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone-inbound-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zM15.854.146a.5.5 0 0 1 0 .708L11.707 5H14.5a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793L15.146.146a.5.5 0 0 1 .708 0z"/>
            </svg>
            <svg class="mute" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone-x-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm9.261 1.135a.5.5 0 0 1 .708 0L13 2.793l1.146-1.147a.5.5 0 0 1 .708.708L13.707 3.5l1.147 1.146a.5.5 0 0 1-.708.708L13 4.207l-1.146 1.147a.5.5 0 0 1-.708-.708L12.293 3.5l-1.147-1.146a.5.5 0 0 1 0-.708z"/>
            </svg>
        </button>
        <button id="mic-mute-toggle" type="button" class="btn btn-secondary unmuted">
            <svg class="unmute" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mic-fill" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" />
                <path fill-rule="evenodd"
                    d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" />
            </svg>
            <svg class="mute" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mic-mute-fill"
                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M12.734 9.613A4.995 4.995 0 0 0 13 8V7a.5.5 0 0 0-1 0v1c0 .274-.027.54-.08.799l.814.814zm-2.522 1.72A4 4 0 0 1 4 8V7a.5.5 0 0 0-1 0v1a5 5 0 0 0 4.5 4.975V15h-3a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-3v-2.025a4.973 4.973 0 0 0 2.43-.923l-.718-.719zM11 7.88V3a3 3 0 0 0-5.842-.963L11 7.879zM5 6.12l4.486 4.486A3 3 0 0 1 5 8V6.121zm8.646 7.234l-12-12 .708-.708 12 12-.708.707z" />
            </svg>
        </button>
        <button id="play" type="button" class="btn btn-secondary">
            <svg id="svg-play" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-play-fill" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
            </svg>
            <svg id="svg-pause" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pause-fill"
                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z" />
            </svg>
        </button>
        <span id="timer" class="input-group-text" id="addon-wrapping">00:00:00</span>
        <button id="client_url" type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
            data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-share-fill" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" />
            </svg>
        </button>
    </div>
    <canvas id="pdf-canvas"></canvas>

    <script>
        $(() => {
            $('[data-toggle="popover"]').popover()
        })
        function getws(query){
            proto = window.location.protocol.replace("http", "ws") + "//"
            url = proto + window.location.host + query;
            return new WebSocket(url);
        }
        function host_channel(ev) {

            console.log("host channel");
            var stream_query = {
                "mode": "host-stream",
                "channel": ev.name,
            }
            var streamer, player;
            var stream_ws = getws("/echos?" + new URLSearchParams(stream_query).toString());
            stream_ws.addEventListener("open", (e) => {
                console.log(e, streamer);
                streamer = new WSAudioAPI.Streamer({}, stream_ws);
                // streamer.conf = conf;
                streamer.start();
                $("#mic-mute-toggle").on("click", (e)=>{
                    $("#mic-mute-toggle").toggleClass("muted");
                    $("#mic-mute-toggle").toggleClass("unmuted");
                    if ($("#mic-mute-toggle").hasClass("muted")) {
                        streamer.stop();
                    } else {
                        streamer.start();
                    }
                })
            });
            var play_query = {
                "mode": "host-play",
                "channel": ev.name,
            }
            var player_ws = getws("/echos?" + new URLSearchParams(play_query).toString());
            player_ws.addEventListener("open", (e) => {
                console.log(e, streamer);
                player = new WSAudioAPI.Player({}, player_ws);
                // streamer.conf = conf;
                player.start();
                $("#viewer-mute-toggle").on("click", (e)=>{
                    $("#viewer-mute-toggle").toggleClass("muted");
                    $("#viewer-mute-toggle").toggleClass("unmuted");
                    var stat;
                    if ($("#viewer-mute-toggle").hasClass("muted")) {
                        // player.stop();
                        stat = true;
                    } else {
                        // player.start();
                        stat = false;
                    }
                    var ev = {
                        "type": "viewer-mute",
                        "stat": stat
                    }
                    ws.send(JSON.stringify(ev));
                })
            });
            var canvas = document.getElementById("pdf-canvas");
            $("#client_url").attr("data-content", window.location.origin + window.location.pathname.replace("presenter.html", "viewer.html") + "?" + ev.name);
            var helper = new PDFHelper(pdfurl, canvas, 1, [0, 0, 1, 1], (helper) => {
                ws.send('{"type": "page", "page": ' + helper.pageNum + '}');
            });
            var cursor_interval = 1000 / 16;
            var last_update = 0;
            var playtime = 0;
            var playtimer = null;
            $("#svg-pause").hide();
            $("#play").on("click", (e) => {
                if (playtimer === null) {
                    playtimer = setInterval(() => {
                        playtime = playtime + 1;
                        function fmt(v) {
                            var s = "0" + v;
                            if (s.length > 2)
                                s = "" + v;
                            return s;
                        }
                        var s = fmt(playtime % 60);
                        var m = fmt(parseInt(playtime / 60) % 60);
                        var h = fmt(parseInt(m / 60));
                        console.log(h, m, s, playtime);
                        $("#timer").text(h + ":" + m + ":" + s);
                    }, 1000);
                    $("#svg-pause").show();
                    $("#svg-play").hide();

                } else {
                    clearInterval(playtimer);
                    playtimer = null;
                    $("#svg-pause").hide();
                    $("#svg-play").show();
                }
            })

            canvas.addEventListener("mousemove", (e) => {
                var mills = new Date().getTime();
                if (helper.viewport !== null && mills - last_update > cursor_interval) {
                    var ev = { type: "mousemove", "x": e.offsetX / helper.viewport.width, "y": e.offsetY / helper.viewport.height };
                    if (ev.x > 0 && ev.x < 1) {
                        ws.send(JSON.stringify(ev));
                    }
                }
            });
            canvas.addEventListener("click", (e) => {
                e.preventDefault();
                helper.nextPage();
            });
            canvas.addEventListener("contextmenu", (e) => {
                e.preventDefault();
                helper.prevPage();
            });

        }
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
        var ws = getws("/echo");
        var pdfurl = document.location.href.split("presenter.html?")[1];
        var channel_init = {
            type: "channel",
            name: "test_channel",
            url: pdfurl
        }
        ws.addEventListener("open", () => {
            ws.addEventListener("message", (e) => {
                var ev = JSON.parse(e.data);
                console.log(ev, ev.type);
                if (ev.type == "channel_created") host_channel(ev);
            });
            ws.send(JSON.stringify(channel_init));

        });




    </script>
</body>

</html>